<template>
	<view class="demo">
		<view
			style="display: flex;justify-content: center;align-items: center;flex-direction: column; width: 750rpx; margin-top:100rpx;">
			<canvas :style="{ width: width + 'px', height: canvasH + 'px' }" canvas-id="myCanvas"
				id="myCanvas"></canvas>
		</view>
		<view class="qr-box">
			<canvas canvas-id="qrcode" v-show="qrShow" style="width: 204rpx;margin: 0 auto;" />
		</view>
	</view>
</template>
<script>
	import uQRCode from './uqrcode.js'
	export default {
		name: 'Qr',
		props: {
			// 设计稿的像素比基准值
			link: {
				type: String,
				default: ''
			},
			img: {
				type: String,
				default: 2
			},
			monery: {
				type: [String, Number],
				default: 0
			}
			// code: {
			// 	type: Number,
			// 	default: 2
			// },
		},
		data() {
			return {
				qrShow: false,
				sharePageUrl: '',
				invitationCode: '',
				width: 280,
				height: 450,
				canvasW: 280, // 画布宽
				canvasH: 450, // 画布高
				SystemInfo: {}, // 设备信息
				goodsImg: {}, // 商品主图
				goodsImgWidth: 0, // 商品主图宽度
				goodsImgHeight: 0, // 商品主图高度
				bgHeight: 0, // 白色背景高度
				ewmImg: {}, // 二维码图片
				ewmW: '', // 二维码大小
				x: 0,
				tempPath: '',
				yqm: '',
				text: '25',
				isxs: false,
			}
		},
		created() {},
		watch: {
			text: {
				handler(n, o) {
					this.text = n
				},
				deep: true,
				immediate: true
			},
			img: {
				handler(n, o) {
					this.text = this.link
					this.sharePageUrl = n
					if (n) {
						this.qrFun()
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.tempPath,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '保存成功',
							position: 'bottom'
						})
					},
					fail(e) {
						console.log(e, 78888)
						uni.showToast({
							icon: 'none',
							title: e,
							position: 'bottom'
						})
					}
				});
			},
			qrFun() {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: `http://zlg-h5.linglinggong.net/#/?code=${uni.getStorageSync('userId')}`,
					size: 110,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						this.qrShow = false
						this.invitationCode = res
						if (this.invitationCode) {
							this.created()
						}
					},
					fail: e => {
						uni.showLoading({
							title: '绘制失败...',
							mask: true
						});
					}
				})
			},
			async created() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				let that = this
				this.SystemInfo = await this.getSystemInfo();
				this.goodsImg = await this.getImageInfo(this.sharePageUrl); //背景图片
				this.ewmImg = await this.getImageInfo(this.invitationCode); //二维码
				console.log(this.goodsImg, '信息', this.ewmImg)
				this.canvasW = 280; // 画布宽度
				this.canvasH = 500 // 画布高度 = 主图高度+二维码高度
				this.goodsImgHeight = this.canvasH * 982 / 1137
				this.goodsImgWidth = this.goodsImgHeight * 660 / 982
				this.bgHeight = this.goodsImgWidth * 230 / 660
				this.x = (this.canvasW - this.goodsImgWidth) > 0 ? (this.canvasW - this.goodsImgWidth) / 2 : 0
				// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
				if (this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this
					.SystemInfo.errMsg == 'getSystemInfo:ok') {
					setTimeout(() => {
						var ctx = uni.createCanvasContext('myCanvas', this);
						// 1.绘制商品主图-- 高度固定
						ctx.drawImage(this.goodsImg.path, 0, 0, 280,
							500) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
						let img = 'https://lmg.jj20.com/up/allimg/4k/s/02/2109250006343S5-0-lp.jpg'
						// this.ewmImg.path
						ctx.drawImage(this.ewmImg.path, this.x + this.goodsImgWidth - this.bgHeight * 140 /
							180, this.goodsImgHeight - this.bgHeight / 1000, this.bgHeight * 140 / 230,
							this.bgHeight * 140 / 230) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
						// 4.文字信息
						ctx.setFontSize(30 / 230 * 136)
						ctx.setFillStyle('#fff')
						ctx.fillText('￥', 40, 98);
						ctx.setFontSize(30 / 230 * 300)
						ctx.setFillStyle('#fff')
						ctx.fillText(`${this.monery}`, 65, 98);
						ctx.font = 'bold'
						ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
							uni.hideLoading()
							this.isxs = true
							uni.canvasToTempFilePath({ // 保存canvas为图片
								canvasId: 'myCanvas',
								// destWidth: this.canvasW,
								// destHeight: this.canvasH,
								quality: 1,
								success: (res) => {
									console.log(res, '二维码')
									this.tempPath = res.tempFilePath
									that.$emit("tellFather", res.tempFilePath); // 将路径传给父组件
								},
								complete: (res) => {
									// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
									this.tempPath = res.tempFilePath
									that.$emit("tellFather", res.tempFilePath); // 将路径传给父组件
								},
							}, this)
						});
						uni.hideLoading()
					}, 500)
				} else {
					console.log('err')
				}
			},
			// 获取图片信息
			getImageInfo(image) {
				return new Promise((req, rej) => {
					uni.getImageInfo({
						src: image,
						success: function(res) {
							req(res)
						},
					});
				})
			},
			// 获取设备信息
			getSystemInfo() {
				return new Promise((req, rej) => {
					uni.getSystemInfo({
						success: function(res) {
							req(res)
						}
					});
				})
			}
		}
	}
</script>
<style>
	.demo {
		background: #f8f8f8;
		height: 400rpx;
		position: fixed;
		top: -22222222222222rpx;
	}

	.qr-box {
		/* 	margin-top: -20000rpx; */
	}

	canvas {
		display: block;
	}
</style>